<template>
  <div class="middle-top">
    <div class="item">
      <div>118</div>
      <div>今日火灾（起）</div>
    </div>
    <div class="item">
      <div>216</div>
      <div>本月火灾（起）</div>
    </div>
    <div class="item">
      <div>17936</div>
      <div>今年火灾（起）</div>
    </div>

    <CitySign />
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import CitySign from '@/components/citySign.vue'

defineComponent({ name: 'ZhypMiddleTopComp' });
</script>

<style scoped lang="scss">
.middle-top {
  @apply w-[972px] h-[102px] flex justify-between absolute top-0 left-1/2 -translate-x-1/2;

  .item {
    @apply w-[280px] h-full pl-[118px] pb-[10px] flex flex-col justify-end;
    background: url('./assets/fire-bg.png') no-repeat center;

    div:first-child {
      @apply font-bold text-[40px] text-[#4ccaff] leading-[38px];
      font-family: D-DIN-PRO;
      background: linear-gradient(0deg, #44bfff 0%, #fff 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    div:last-child {
      @apply text-[18px] mt-[2px];
      font-family: Alibaba PuHuiTi;
    }
  }
}
</style>
